<template>
  <view class="custom-tab-bar">
    <view 
      class="tab-item" 
      v-for="(item, index) in tabList" 
      :key="index"
      :class="{active: current === index}"
      @tap="switchTab(item.pagePath, index)"
    >
      <text class="tab-text">{{item.text}}</text>
      <view v-if="current === index" class="tab-indicator"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['tabChange']);

const tabList = ref([
  {
    pagePath: '/pages/index/index',
    text: '首页'
  },
  {
    pagePath: '/pages/post/create',
    text: '发布'
  },
  {
    pagePath: '/pages/user/me',
    text: '我的'
  }
]);

const switchTab = (path, index) => {
  if (props.current !== index) {
    emit('tabChange', index);
    uni.switchTab({
      url: path
    });
  }
};
</script>

<style lang="scss">
.custom-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background-color: #FFFFFF;
  border-top: 1rpx solid #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
  
  .tab-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s;
    
    &.active .tab-text {
      color: #6e8efb;
      font-weight: 550;
      transform: scale(1.05);
    }
  }
  
  .tab-text {
    font-size: 36rpx;
    color: #888888;
    transition: all 0.25s;
    letter-spacing: 2rpx;
    font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 12rpx 0;
  }
  
  .tab-indicator {
    position: absolute;
    bottom: 16rpx;
    width: 42rpx;
    height: 8rpx;
    background: linear-gradient(to right, #6e8efb, #a777e3);
    border-radius: 4rpx;
    margin-top: 10rpx;
    transition: all 0.25s;
  }
}
</style> 